<!--
 * @Description:  
 * @Author: YiHe
 * @Date: 2020-07-03 08:41:38
 * @LastEditors: YiHe
 * @LastEditTime: 2020-08-14 01:10:07
-->
<template>
	<view class="imageLoad" :style="{ borderRadius: borderRadius + 'rpx', background: isMainLoad ? 'transparent' : ' #EBEEF5' }">
		<image v-if="mode !== 'widthFix'" mode="aspectFill" :src="src" webp="true" :class="{ outIn: isLoad }" @load="imageLoad(index)"></image>
		<image v-if="mode === 'widthFix'" style="height: auto;" mode="widthFix" v-show="isLoad" :src="src" webp="true" :class="{ outIn: isLoad }" @load="imageLoad(index)"></image>
		<slot></slot>
		<u-loading class="loading" :show="!isLoad" color="#FECE60" size="60"></u-loading>
	</view>
</template>

<script>
export default {
	props: ['src', 'borderRadius','mode'],
	data() {
		return {
			isLoad: false,
			isMainLoad: false
		}
	},
	methods: {
		imageLoad: function() {
			this.isLoad = true
			setTimeout(() => {
				this.isMainLoad = true
			}, 100)
		}
	}
}
</script>

<style lang="stylus">
.imageLoad
	width 100%
	height 100%
	transition all 0.3s
	margin-bottom -6px
	position relative
	.loading
		position absolute
		left 50%
		top 50%
		transform translate(-50%,-50%)
	image
		opacity 0
		height 100%
		width 100%
</style>
